<script setup lang="ts">
import axios from 'axios'
import { reactive, ref } from 'vue'
import FileFIcon from '@/components/ico/admon/fileFIcon.vue'

const tableData = ref([])

function Dy(n: number) {
  axios.get('/api/file/getFile', {
    params: {
      k: n
    },
    headers: {
      Authorization: localStorage.getItem('token')
    }
  }).then((res) => {
    const da: [] = res.data.data
    for (let i = 0; i < da.length; i++) {
      tableData.value.push(da[i])
    }
  })
}

Dy(1)

const loa = ref(true)
const el_table = ref(false)
setTimeout(() => {
  loa.value = false
  el_table.value = true
}, 1000)

const fileF = ref(false)

const fatherClick = (data) => {
  fileF.value = false
  tableData.value.unshift(data)
  console.log(data)
}

function el_s(name: string) {
  axios.get(`/api/file/scFilm`, {
    params: {
      name: name
    },
    headers: {
      Authorization: localStorage.getItem('token')
    }
  }).then(() => {
    let myArray = tableData.value
    myArray = myArray.filter(function(item) {
      return item.name !== name
    })
    tableData.value = myArray
  })
}


// do not use same name with ref
const form = reactive({
  name: '',
  zhuY: '',
  director: '',
  date: '',
  time: '',
  lei: ''
})
const sonClick = () => {
  k.value = false
}


const k = ref(false)
const file = ref()

function el_b(name: string, director: string, zhu: string, date: string, time: string, lei: string) {
  k.value = true
  form.date = date
  form.time = time
  form.lei = lei
  form.director = director
  form.zhuY = zhu
  form.name = name
  file.value = name


}


function open() {
  const data = new FormData()
  data.append('name', file.value)
  data.append('nameNew', form.name)
  data.append('zhuY', form.zhuY)
  data.append('director', form.director)
  data.append('date', form.date)
  data.append('time', form.time)
  data.append('lei', form.lei)
  axios.post('/api/file/upFile', data, {
    headers: {
      Authorization: localStorage.getItem('token')
    }
  })
  let myArray = tableData.value
  myArray = myArray.filter(function(item) {
    if (item.name === file.value) {
      item.zhuY = form.zhuY
      item.director = form.director
      item.date = form.date
      item.time = form.time
      item.lei = form.lei
      item.name = form.name
    }
    return item
  })
  tableData.value = myArray
  k.value = false
}
</script>

<template>
  <div class="fil"></div>
  <div class="primary">
    <el-button type="primary" @click="fileF=true">上传电影</el-button>
  </div>
  <div class="fileF" v-if="fileF">
    <file-f-icon @son-click="fatherClick" />
  </div>
  <div style="height: 100%;width: 100%" v-loading="loa">


    <el-table v-if="el_table" :data="tableData" style="width: 100%;overflow: hidden">

      <el-table-column prop="img_url" label="海报" width="170">
        <template v-slot="scope">
          <div class="img">
            <img :src="scope.row.img_url" alt="" width="100%" height="100%">
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed prop="name" label="电影名称" width="150" />
      <el-table-column prop="director" label="导演" width="120" />
      <el-table-column prop="zhu" label="主演" width="300" />
      <el-table-column prop="date" label="上映时间" width="150" />
      <el-table-column prop="time" label="时长" width="100" />
      <el-table-column prop="lei" label="类型" width="100" />
      <el-table-column prop="zhang" label="获赞" width="100" />
      <el-table-column prop="chai" label="获踩" width="100" />
      <el-table-column fixed="right" label="编辑" min-width="110">
        <template v-slot="scope">
          <el-button link type="primary" size="small" @click="el_b(
            scope.row.name,
            scope.row.director,
            scope.row.zhu,
            scope.row.date,
            scope.row.time,
            scope.row.lei,
            )">编辑
          </el-button>
          <el-button link type="primary" size="small" @click="el_s(scope.row.name)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div v-if="k" class="comment-form">
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="电影名：">
        <el-input v-model="form.name" type="text" />
      </el-form-item>
      <el-form-item label="导演：">
        <el-input v-model="form.director" type="text" />
      </el-form-item>
      <el-form-item label="主演：">
        <el-input v-model="form.zhuY" type="text" />
      </el-form-item>
      <el-form-item label="上映时间及时长：">
        <el-col :span="11">
          <el-input v-model="form.date" placeholder="上映时间" type="text" />
        </el-col>
        <el-col :span="2" class="text-center">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-input v-model="form.time" placeholder="时长" type="text" />
        </el-col>
      </el-form-item>
      <el-form-item label="类型：">
        <el-input v-model="form.lei" />
      </el-form-item>
      <div class="butt">
        <el-button type="primary" @click="open"> 确认</el-button>
        <el-button type="danger" @click="sonClick()">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<style scoped>
.primary {
  position: absolute;
  top: 15px;
  right: 35px;
  z-index: 4;
}

.img {
  width: 130px;
  height: 150px;
  margin-top: 10%;
  margin-bottom: 10%;
  border-radius: 10px;
  overflow: hidden;

}

.butt {
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

.comment-form {
  background-color: white;
  position: absolute;
  padding: 38px;
  top: 10%;
  z-index: 4;
  right: 30%;
  border-radius: 10px;
  border: 1px solid #cee3ff;
}

/deep/ .el-input__inner {
  color: rgba(0, 0, 0, 0.89);
}


:deep .el-input__wrapper {
  background-color: rgba(13, 16, 13, 0) !important;

}

:deep .el-input-group__append {
  background-color: rgba(0, 0, 0, 0) !important;

}
</style>